<template>
    <div>
      <Header :position="positionTitle"></Header>
      <el-tabs type="border-card" v-model="activeName" >
        <el-tab-pane label="越限报警" name="first"></el-tab-pane>
        <el-tab-pane label="故障统计" name="second"></el-tab-pane>
        <el-tab-pane label="故障预测" name="third"></el-tab-pane>
        <el-tab-pane label="历史记录" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-card style="margin-top: -32px;height: 834px">
        <div style="display: flex">
          <div style="">
            <div style="width: 200px; padding: 20px; margin-left: 30px">
              <h3>操作记录（条）</h3>
              <h1 style="color: #91cc75;font-size: 100px;">196</h1>
            </div>
          </div>
          <div style="margin-top: 20px;margin-right: 100px;;margin-left: 50px;
                    text-align: center;display: flex;align-items: center;flex-flow: column">
              <div style="display: flex;align-items:center;height: 40%">
                <label style="margin-right: 10px;font-size: 20px;color: black;width: 50px">删除</label>
                <el-progress percentage="57" style="width: 300px;display: inline-block"></el-progress>
              </div>
              <div style="display: flex;align-items:center;height: 40%;">
                  <label style="margin-right: 10px;font-size: 20px;color: black">修改</label>
                  <!--                <div style="font-size: 30px;color: #7F828B">123</div>-->
                  <el-progress percentage="43" style="width: 300px"></el-progress>

              </div>
          </div>

          <div style="width: 70%;margin-right: 50px">
              <h3 style="margin-bottom: 10px">越限报警数量统计</h3>
              <div id="WaveformGraph" style="height: calc(100% - 20px);width: calc(100% - 20px);margin-left: 20px"></div>
          </div>
        </div>
        <el-table :data="dataList" stripe style="width: 100%" height="540">
          <el-table-column label="序号" type="index" prop="indexNum">
          </el-table-column>
          <el-table-column label="故障名称" prop="FaultdName">
          </el-table-column>
          <el-table-column label="故障类型" prop="FaultType">
          </el-table-column>
          <el-table-column label="故障等级" prop="FaultGrade">
          </el-table-column>
          <el-table-column label="位置" prop="position">
          </el-table-column>
          <el-table-column label="车号" prop="cardNum">
          </el-table-column>
          <el-table-column label="操作">
<!--            <template slot-scope="scope">-->
            <template>
              <el-button size="mini" type="danger">删除</el-button>
              <el-button size="mini" type="primary">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="20"
            style="display: inline-block"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
        </el-card>
    </div>
</template>

<script>
  import Header from "../Header";
  import * as echarts from "echarts";
    export default {
        name: "FaultDataCard",
      components:{
          Header
      },
      data(){
          return{
            activeName:'first',
            dataList:[{indexNum:'1',FaultdName:'振动严重',FaultType:'振动',FaultGrade:'一级',position:'轴 承',cardNum:'京A1234'},
              {indexNum:'2',FaultdName:'振动严重',FaultType:'振动',FaultGrade:'一级',position:'发动机',cardNum:'京A12E12'},
              {indexNum:'3',FaultdName:'振动严重',FaultType:'振动',FaultGrade:'二级',position:'风动机',cardNum:'京A12R42'},
              {indexNum:'4',FaultdName:'振动严重',FaultType:'振动',FaultGrade:'三级',position:'发电机',cardNum:'京A12D4'},
              {indexNum:'5',FaultdName:'发热严重',FaultType:'发热',FaultGrade:'二级',position:'机 舱',cardNum:'京A1AE34'},
              {indexNum:'6',FaultdName:'发热严重',FaultType:'发热',FaultGrade:'三级',position:'机 舱',cardNum:'京A1GF34'},
              {indexNum:'7',FaultdName:'发热严重',FaultType:'发热',FaultGrade:'二级',position:'机 舱',cardNum:'京A1W34'},
              {indexNum:'8',FaultdName:'噪音大',FaultType:'噪音',FaultGrade:'三级',position:'变桨系统',cardNum:'京A1FE34'},
              {indexNum:'9',FaultdName:'噪音大',FaultType:'噪音',FaultGrade:'二级',position:'变桨系统',cardNum:'京AWE34'},
            ],
            positionTitle:{
              secondTitle:'数据管理' ,
              thirdTitle:'故障管理',
              routeString:'/DataManagement/DateFile',
            },
              WaveformGraphData:{
                xData:['19:54','19:55','19:56','19:57','19:58','19:59','20:00'],
                  value1:[120, 132, 101, 134, 90, 230, 210],
                  value2:[220, 182, 191, 234, 290, 330, 310]
              }
          }
      },
      mounted() {
        this.DrawWaveformGraph()
      },
      methods:{
        DrawWaveformGraph(){
          let myChart = echarts.init(document.getElementById('WaveformGraph'));
          let option = {
            tooltip : {
              trigger: 'axis'
            },
            legend: {
              data:['删除','修改']
            },
            toolbox: {
              show : true,
              feature : {
                mark : {show: true},
                // dataView : {show: true, readOnly: true},
                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore : {show: false},
                saveAsImage : {show: false}
              }
            },
            calculable : true,
            xAxis : [
              {
                type : 'category',
                name:'时间',
                boundaryGap : false,
                data : this.WaveformGraphData.xData

            }
            ],
            yAxis : [
              {
                name: '次数',
                type : 'value'
              }
            ],
            grid: {
              x: 70,
              y:30,
              x2: 70,
              y2:30,
            },
            series : [
              {
                name:'删除',
                type:'line',
                smooth: true,
                data:this.WaveformGraphData.value1
              },
              {
                name:'修改',
                type:'line',
                smooth: true,
                data:this.WaveformGraphData.value2
              },
            ]
          };
          myChart.setOption(option);
        },
      }
    }
</script>

<style scoped>
</style>
